/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018-12-13 Time: 22:41
 *
 * 通用
 *
 * 图片与文字为主，用在列表项
 */

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image
} from 'react-native';
import PropTypes from 'prop-types';
import {COLOR_GRAY_LINE, COLOR_THEME, FONT_COLOR_SUB_TITLE, FONT_COLOR_TITLE, FONT_SIZE_TITLE} from "../../constant/PHColors"
import AntDesign from "react-native-vector-icons/AntDesign"

export default class ImageAndTextCellView extends Component {

  static propTypes = {
    title: PropTypes.string.isRequired,
    num: PropTypes.number
  }

  static defaultProps = {
    num: 0
  }

  render() {
    return (
      <View style={styles.body}>

        <View style={styles.imgBox}>
          <Image style={styles.img} source={imgSource(this.props.title)}/>
        </View>

        <View style={styles.textBox}>
          <View style={styles.leftBox}>
            <Text style={styles.text}>
              {this.props.title}
            </Text>
          </View>
          {
            this.props.num > 0 &&
            <View style={styles.rightBox}>
              <Text style={styles.numText}>
                {this.props.num}
              </Text>
            </View>
          }
        </View>

        <View style={styles.arrowBox}>
          <AntDesign name={'right'} size={18} style={{color: FONT_COLOR_SUB_TITLE}}/>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({

  body: {
    height: 50,
    flexDirection: 'row',
    backgroundColor: '#FFF',
    alignItems: 'center'
  },

  imgBox: {
    width: 20,
    height: 20,
    marginLeft: 15
  },

  img: {
    width: 20,
    height: 20
  },

  textBox: {
    flex: 1,
    flexDirection: 'row'
  },

  arrowBox: {
    marginRight: 15
  },

  leftBox: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start'
  },

  text: {
    fontSize: FONT_SIZE_TITLE,
    color: FONT_COLOR_TITLE,
    marginLeft: 15
  },

  rightBox: {
    width: 20,
    height: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
    marginRight: 10,
    borderRadius: 10
  },

  numText: {
    fontSize: 10,
    color: '#FFF'
  }
})

const imgSource = (title) => {
  switch (title) {
    case '即时工单': {
      return require('../../resource/tabmenu/bq_baobiao01.png');
    }
    default: {
      return require('../../resource/tabmenu/bq_baobiao01.png');
    }
  }
}